import styles from '../style.less';
import { Grid } from 'antd-mobile';
import { InbizIcon, webDataSourceClick } from '@inbiz/utils';
import { useInbizRouter } from '@inbiz/hooks';
import { TextWidget } from '@inbiz/react';

export default function SeprationGrid(props: any) {
  const {
    newDataSource,
    contentType,
    fontSize,
    titleColor,
    radius,
    mobilerowCount,
    horizontalGutter,
    verticalGutter,
    gridHeight,
    colHeight,
    showType = 'grid',
    itemWidth,
    cardBackground,
    cardBoxshadow,
    cardBorder,
    rowCount,
    textAlign,
    position,
    descFontSize,
    descColor
  } = props;

  const history = useInbizRouter();

  // 自适应样式，grid布局
  let commonStyle = {
    height: colHeight ?? gridHeight,
    borderRadius: radius ? radius : '',
    ...cardBackground,
    ...cardBorder,
    boxShadow: cardBoxshadow
  }

  // 非自适应样式
  let listCommonStyle = {
    height: colHeight ?? gridHeight,
    borderRadius: radius ? radius : '',
    ...cardBackground,
    ...cardBorder,
    boxShadow: cardBoxshadow,
    width: itemWidth,
  }



  let positionStyle = {
    display: 'flex',
    width: '100%',
    height: '100%',
    alignItems: "center",
    padding: 5,
    justifyContent: "center",
    flexDirection: position == 'left' ?
      'row' : position == 'right' ?
        'row-reverse' : position == 'top' ?
          'column' : position == 'bottom' ?
            'column-reverse' : 'column'
  }


  let fontStyle = {
    fontSize: fontSize,
    color: titleColor,
    textAlign: textAlign
  }

  let descStyle = {
    fontSize: descFontSize,
    color: descColor
  }

  const isIconShow = contentType !== 2 && position;



  let ItemCommonStyle = {};
  let ItemFontStyle = {};
  let ItemDescStyle = {};

  return showType === 'grid' ? (
    <Grid
      columns={mobilerowCount ?? 2}
      gap={[horizontalGutter, verticalGutter]}
    >
      {newDataSource.map((item: any) => {

        ItemCommonStyle = {
          backgroundColor: item?.blockBackgroundColor,
          ...commonStyle
        }

        ItemDescStyle = {
          ...descStyle
        }

        if (item.cardStyle) {
          ItemCommonStyle = {
            ...item.cardBackground,
            ...item.cardBorder,
            boxShadow: item.cardBoxshadow ?? cardBoxshadow,
          }

          ItemFontStyle = {
            ...fontStyle,
            fontSize: item.nameFontSize ?? fontSize,
            color: item.nameColor ?? titleColor,
          }

          ItemDescStyle = {
            ...descStyle,
            fontSize: item.describeFontSize ?? descFontSize,
            color: item.describeColor ?? descColor
          }
        }

        return (
          <Grid.Item
            key={item.id}
            onClick={() => {
              props && props.emit('onclick', item);
              webDataSourceClick(history, item);
            }}
          >
            <>
              <div
                style={{
                  height: gridHeight,
                  borderRadius: radius ? radius : '',
                  background: item.blockBackgroundColor,
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                }}
              >
                {contentType !== 2 && (
                  <InbizIcon
                    className={styles['item_icon']}
                    type={item.icon?.type || 'icon-inbiz_basic-settings'}
                    style={{
                      color: item.icon?.color || '#999',
                      fontSize: item.icon?.size || '24px',
                    }}
                  />
                )}
              </div>
              {contentType !== 3 && (
                <p
                  style={{
                    fontSize: `${fontSize}px`,
                    color: item.titleColor,
                    marginBottom: 0,
                  }}
                >
                  <TextWidget>{item.title}</TextWidget>
                </p>
              )}
            </>
          </Grid.Item>
        )
      })}
    </Grid>
  ) : (
    <div
      className={styles.navigationFlex}
      style={{
        margin: `0 -${horizontalGutter}px -${verticalGutter}px 0`,
      }}
    >
      {newDataSource.map((item: any) => (
        <div
          style={{
            marginRight: horizontalGutter,
            marginBottom: verticalGutter,
            width: itemWidth,
          }}
        >
          <>
            <div
              style={{
                height: gridHeight,
                borderRadius: radius ? radius : '',
                background: item.blockBackgroundColor,
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
              }}
            >
              {contentType !== 2 && (
                <InbizIcon
                  className={styles['item_icon']}
                  type={item.icon?.type || 'icon-inbiz_basic-settings'}
                  style={{
                    color: item.icon?.color || '#999',
                    fontSize: item.icon?.size || '24px',
                  }}
                />
              )}
            </div>
            {contentType !== 3 && (
              <p
                style={{
                  fontSize: `${fontSize}px`,
                  color: item.titleColor,
                  marginBottom: 0,
                }}
              >
                <TextWidget>{item.title}</TextWidget>
              </p>
            )}
          </>
        </div>
      ))}
    </div>
  );
}
